// setState修改状态
// setState修改更新视图
// this.setState({属性名：值})
// react不能直接修改state，只能setState修改数据更新视图

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  state = {
    msg: 'Hello React',
    count: 100,
    list: ['苹果'],
  };
  handlerClick = () => {
    this.setState({
      msg: ' 你好 react',
      count: this.state.count + 1,
      // ...拓展运算符
      list: [...this.state.list, '西瓜'],
    });
  };
  render() {
    return (
      <div>
        <h3>{this.state.msg}</h3>
        <h3>{this.state.count}</h3>
        <h3>{this.state.list}</h3>
        <button onClick={this.handlerClick}>点我修改msg</button>
      </div>
    );
  }
}
// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
